<template>
  <!-- 信息录入 -->
  <div class="box">
    <OrderInformation
      :orderNumber="orderNumber"
      :golbalPermissions="golbalPermissions"
    ></OrderInformation>
    <div class="btn_wrap">
      <el-button
        v-if="showOrderRev"
        @click="showDia"
        type="primary"
        size="small"
      >
        修改录入信息</el-button
      >
    </div>
    <div class="enterInfor">
      <table border="1">
        <tr>
          <td rowspan="2" width="150" class="left">客户信息</td>
          <td width="150" class="title">申请人姓名</td>
          <td>{{ showForm.basicBorrowerName }}</td>
          <td width="150" class="title">身份证号码</td>
          <td>{{ showForm.basicBorrowerCard }}</td>
          <td width="150" class="title">联系电话</td>
          <td>{{ showForm.basicBorrowerPhone }}</td>
          <td width="150" class="title">现住地址</td>
          <td>{{ showForm.basicBorrowerAddress }}</td>
        </tr>
        <tr>
          <td width="150" class="title">受理时间</td>
          <td>{{ showForm.acceptTime }}</td>
          <td width="150" class="title"></td>
          <td></td>
          <td width="150" class="title"></td>
          <td></td>
          <td width="150" class="title"></td>
          <td></td>
        </tr>
      </table>
    </div>

    <el-dialog
      title="修改信息"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1000px"
    >
      <el-form
        class="addInfor"
        label-width="100px"
        size="small"
        :inline="true"
        ref="inforForm"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="申请人姓名" prop="basicBorrowerName">
          <el-input v-model="form.basicBorrowerName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="basicBorrowerCard">
          <el-input v-model="form.basicBorrowerCard"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="basicBorrowerPhone">
          <el-input v-model="form.basicBorrowerPhone"></el-input>
        </el-form-item>
        <el-form-item label="现住地址" prop="basicBorrowerAddress">
          <el-input v-model="form.basicBorrowerAddress"></el-input>
        </el-form-item>
        <el-form-item label="受理时间">
          <el-date-picker
            v-model="form.acceptTime"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="validataForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import OrderInformation from "@/components/fapai/OrderInformation";
import { updaAucForm, getAucMort } from "../../../src/assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
import { GMTToStr } from "../../assets/js/utlis";
export default {
  name: "Information",
  created() {
    this.orderNumber = this.orderNumber = sessionStorage.getItem("orderNumber");
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.getAccInfo();
  },
  components: { OrderInformation },
  data() {
    return {
      orderNumber: "",
      dialogVisible: false,
      showForm: {},
      form: {
        basicBorrowerName: "",
        basicBorrowerCard: "",
        basicBorrowerPhone: ""
      },
      //权限
      golbalPermissions: [],
      rules: {
        basicBorrowerName: [
          { required: true, message: "请输入申请人姓名", trigger: "blur" }
        ],
        basicBorrowerCard: [
          { required: true, message: "请填写证件号码", trigger: "blur" },
          {
            pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
            message: "证件号码格式有误！",
            trigger: "blur"
          }
        ],
        basicBorrowerPhone: [
          { required: true, message: "请输入手机号码", trigger: "change" },
          {
            validator: function(rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {
    //修改按钮
    showOrderRev: function() {
      return checkPermiss(
        "business:auction:updateForm",
        this.golbalPermissions
      );
    }
  },
  methods: {
    //获取录入信息
    getAccInfo() {
      getAucMort(this.orderNumber).then(res => {
        this.showForm = res.data;
        this.form = JSON.parse(JSON.stringify(this.showForm));
        if (this.showForm.acceptTime) {
          this.showForm.acceptTime = this.showForm.acceptTime.substring(0, 10);
        }
      });
    },
    //打开弹窗
    showDia() {
      this.dialogVisible = true;
    },
    //表单验证
    validataForm() {
      this.$refs["inforForm"].validate(valid => {
        if (valid) {
          this.form.orderNumber = this.orderNumber;
          let prductId = parseInt(sessionStorage.getItem("prductId"));
          this.form.productId = prductId;
          //转换日期格式
          if (this.form.acceptTime) {
            this.form.acceptTime = GMTToStr(this.form.acceptTime);
          }
          updaAucForm(this.form).then(res => {
            if (res.code == 200) {
              this.$message.success(res.message);
              this.dialogVisible = false;
              this.getAccInfo();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          this.$message.error("请检查输入的格式");
          return false;
        }
      });
    }
  }
};
</script>
<style scoped type="less">
.addInfor {
  text-align: left;
}
.addInfor ::v-deep.el-form-item__content {
  width: 210px;
  vertical-align: middle;
}
.addInfor ::v-deep.el-date-editor.el-input {
  width: 100%;
}
.addInfor ::v-deep.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}
.btn_wrap {
  text-align: right;
  padding: 5px 0;
}
.enterInfor table {
  width: 100%;
}
.enterInfor table {
  border-collapse: collapse;
  border: 1px rgb(121, 121, 121) solid;
  table-layout: fixed;
}
.enterInfor table td {
  padding: 5px 0;
  font-size: 14px;
  color: #333333;
  text-align: left;
  padding-left: 10px;
  border: 1px rgb(121, 121, 121) solid;
}
::v-deep .el-range-editor--small.el-input__inner {
  width: 210px;
}
.enterInfor .left {
  font-size: 14px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  padding: unset;
}
.enterInfor .title {
  background: rgba(59, 157, 248, 0.06);
}
</style>
